<template>
  <up-tabbar 
  	:value="activeIndex" 
	:fixed="true"
		:placeholder="true"
		:safeAreaInsetBottom="true"
  	activeColor="#11C0D7" 
  	inactiveColor="#8C8C8C"
  >
    <up-tabbar-item
      v-for="(item, index) in tabbarList"
      :text="item.text"
      :key="index"
      :border="false"
      @click="tabBarChange(item.pagePath, index)"
    >
      <template #active-icon>
        <image class="slot-icon" :src="item.selectedIconPath"></image>
      </template>
      <template #inactive-icon>
        <image class="slot-icon" :src="item.iconPath"></image>
      </template>
    </up-tabbar-item>
	<view class="fab-button" @click="fabClick">
	      <up-icon name="plus" size="28"></up-icon>
	    </view>
  </up-tabbar>
</template>

<script setup>
	import { onShow } from '@dcloudio/uni-app';
import { ref, reactive } from 'vue';
				// tabbar列表，配置自定义用到的属性字段
		const tabbarList = ref([
					{
						pagePath: "/pages/home/index",
						iconPath: "/static/图片/首页 (4).png",
						selectedIconPath: "/static/图片/首页 (3).png",
						text: "首页",

					},
					{
						pagePath: "/pages/serve/index",
						iconPath: "/static/图片/书本 (1).png",
						selectedIconPath: "/static/图片/书本.png",
						text: "服务",
					},
					{
						pagePath: "/pages/pblish/index"
					},
					{
						pagePath: "/pages/post/index",
						iconPath: "/static/图片/星球 (1).png",
						selectedIconPath: "/static/图片/星球.png",
						text: "帖子",
					},
					{
						pagePath: "/pages/personal/index",
						iconPath: "/static/图片/_我的 (1).png",
						selectedIconPath: "/static/图片/_我的.png",
						text: "我的",
					},
				]);
				const activeIndex = ref(0);
				// 发布按钮点击事件
				const fabClick = () => {
				  console.log("发布按钮被点击");
				};
				onShow(() => {
					getActiveIndex();
				});
				
				const getActiveIndex = () => {  
					console.log(getCurrentPages());
					const pages = getCurrentPages(); //获取当前页面栈，返回一个数组，数组的最后一个元素是当前页面
					let page = pages[pages.length - 1]
					tabbarList.value.forEach((item, index) => {
						if(item.pagePath === page.route) {
							activeIndex.value = index;
						}
					});
				};
				function tabBarChange(url, index) {
					activeIndex.value = index;
					console.log(activeIndex.value)
				  uni.switchTab({
				    url: url,
				  });
				}

</script>

<style lang="scss" scoped>
	.container {
	  position: relative;
	}
	.slot-icon {
		height: 50rpx;
		width: 50rpx;
	}
	/* 添加一个圆形凸起按钮的样式 */
	.fab-button {
	  position: fixed;
	  bottom: 7px; /* 调整到 Tabbar 中间位置 */
	  left: calc(50% - 60rpx); /* 居中显示 */
	  width: 120rpx;
	  height: 120rpx;
	  border-radius: 60rpx; /* 圆形 */
	  background-color: #ffffff; /* 背景颜色 */
	  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  z-index: 999; /* 确保按钮在最上层 */
	}

	
	.fab-icon {
	  height: 60rpx;
	  width: 60rpx;
	}
</style>
